<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>多页签</title>
    <script type="text/javascript">
        var XXUIStyleCode = 'pure';
    </script>
    
    <link rel="stylesheet" type="text/css" href="../../dist/css/xxui.pure.min.css"></link>
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../jquery-tag-demo.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.xxui.min.js"></script>
    <script type="text/javascript" src="../../dist/js/locale/xxui-lang-zh_CN.js"></script>	
    <script type="text/javascript" src="../mock-min.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    

	 
		<style>
			.demo-exp-code{
				border-color:transparent;
			}
		</style>
	
</head>

<body style="background-color:#cde6ff;">

	<h2>页签</h2>
	<h3>说明:</h3>
    <span>页签（Tabs ）一次仅显示一个面板（panel），每个面板（panel）都有标题、图标和关闭按钮。 当 Tabs 被选中时，将显示对应的面板（panel）的内容。</span>
	<h3>如：</h3>
	<!-- default gray-->
	<div class="demo-exp-code entry-content"> 
		
		<div id="tt" class="xxui-tabs"  style="width:500px;height:100px;" >
			<!--wanghc 2018-04-11 tab页签上不要增加小图标 data-options="iconCls:'icon-add-note'"-->   
			<div title="电子病历" data-options="closable:true,iconCls:'icon-tabs'" style="padding:10px 15px 15px 15px;">   
				tab1 电子病历
			</div>   
			<div title="诊断录入" data-options="closable:true,iconCls:'icon-tabs'" style="overflow:auto;padding:10px 15px 15px 15px;">   
				tab1   诊断录入  
			</div>   
			<div title="医嘱录入" data-options="closable:true,iconCls:'icon-tabs'" style="padding:10px 15px 15px 15px;">   
				tab1   医嘱录入 
			</div> 
		</div>
	</div>
	<!-- gray tabs-->
	<h3>点击监听</h3>
	<!-- <div id="tab-tools">
		<a id="btQuotation" title="引用" href="#" class="xxui-linkbutton">引用</a>
	</div> -->
	<div class="demo-exp-code entry-content">
		<div class="use-prettyprint lang-html">
	<div id="tt2" class="xxui-tabs" style="width:500px;height:150px;">   
		<div title="电子病历" style="padding:10px 15px 15px 15px;">   
			如果页签太多则自动隐藏，可滚动显示 
		</div>   
		<div title="诊断录入" data-options="closable:false" style="overflow:auto;padding:10px 15px 15px 15px;">   
			诊断录入    
		</div>   
		<div title="医嘱录入" data-options="closable:false" style="padding:10px 15px 15px 15px;">   
			医嘱录入    
		</div>  
		<div title="检查列表" data-options="closable:false" style="padding:10px 15px 15px 15px;">   
			检查列表    
		</div>
	</div>
		</div>
		<div class="use-prettyprint lang-js">
			<script type="text/javascript">
				$(function(){
					$XUI.tabs("#tt2",{
						onSelect:function(title){
							$.messager.popover({type:'info',msg:'切换到【'+title+'】'}); //alert('你确定要切换到【'+title+'】');					
						}
					});
					//$('#tt2').tabs('disableTab', 0); 
				});
			</script>
		</div> 
	</div>	
	

	<h3>页签过多滚动效果</h3>
	<div class="demo-exp-code entry-content">
		<div class="use-prettyprint">
			<div id="mytabs1" class="xxui-tabs" style="width:500px;height:100px;">   
				<div title="电子病历" data-options="" style="padding:10px 15px 15px 15px;"></div>   
				<div title="诊断录入" data-options="" style="padding:10px 15px 15px 15px;"></div>   
				<div title="医嘱录入" data-options="" style="padding:10px 15px 15px 15px;"></div>
				<div title="检查列表" data-options="" style="padding:10px 15px 15px 15px;"></div>
				<div title="检验列表" data-options="" style="padding:10px 15px 15px 15px;"></div>
				<div title="过敏记录" data-options="" style="padding:10px 15px 15px 15px;"></div>
				<div title="生命体征" data-options="" style="padding:10px 15px 15px 15px;"></div>
				<div title="就诊列表" data-options="" style="padding:10px 15px 15px 15px;"></div>
			</div>
		</div>
	</div>	
	<h3>第一个页签作为标题的图表组(<code>isBrandTabs:true</code>)</h3>
	<div class="demo-exp-code entry-content">
		<div class="use-prettyprint">
			<div id="tt-brand-gray" class="xxui-tabs tabs-first-icon" style="width:500px;height:150px;" data-options="isBrandTabs:true">   
				<div title="医嘱浏览" style="padding:10px 15px 15px 15px;" data-options="iconCls:'icon-panel-brand'"></div>   
				<div title="全部" data-options="closable:false" style="padding:10px 15px 15px 15px;"></div>
				<div title="药品" data-options="closable:false" style="padding:10px 15px 15px 15px;"></div>  
				<div title="检查" data-options="closable:false" style="padding:10px 15px 15px 15px;"></div>
				<div title="检验" data-options="closable:false" style="padding:10px 15px 15px 15px;"></div>  
			</div>
		</div>
	</div>
	
	<h3>二.页签位置定义(<code>data-options="tabPosition:'left'"</code>)</h3>
	<div class="demo-exp-code entry-content"> 
		<div style="margin:15px 0;">
			<span>tabPosition:</span>
			<select onchange="$('#tt3').tabs({tabPosition:this.value});$('#tabPosition').html('tabPosition:\''+this.value+'\'');">
				<!--<option value="top">Top</option>
				<option value="bottom">Bottom</option>--> 
				<option value="left" selected>Left</option>
				<option value="right">Right</option>
			</select>
		</div>
		<div id="tt3" class="xxui-tabs tabs-gray tabs-right-left"  data-options="tabPosition:'left',isBrandTabs:true,headerWidth:130,height:200,width:500">   
			<div title="电子病历"  data-options="iconCls:'icon-panel-brand'" style="padding:15px;" >   
				<code id="tabPosition">tabPosition:'left'</code><br>
				<code>headerWidth:100</code><br>
				<code>border:false</code><br>
			</div>   
			<div title="诊断录入"  style="overflow:auto;padding:15px;">   
				tab2    
			</div>   
			<div title="医嘱录入"  data-options="closable:true,selected:true" style="padding:15px;">   
				tab3    
			</div>
			<div title="检查列表" style="padding:15px;">   
				tab4    
			</div>
		</div>
	</div>
		
	
		<h3>四.二级标签页(<code>headerCls="tabs-keywords"</code>)</h3>
		<div class="demo-exp-code entry-content">
			<div id="tt4" class="xxui-tabs tabs-keywords"  data-options="height:200,width:500">   
				<div title="主页" style="padding:10px 15px 15px 15px;">   
					<code>tabs-system</code>
				</div>   
				<div title="诊断录入" data-options="closable:false,selected:true" style="padding:10px 15px 15px 15px;">   
					<div>
						<span>系统性页签一般用于系统级导航</span>
						<span>增加了竖线分割与选中背景色</span>
					</div>
				</div>   
				<div title="医嘱录入" data-options="closable:false" style="padding:10px 15px 15px 15px;">   
					tab3    
				</div>
				<div title="检查列表" data-options="closable:false" style="padding:10px 15px 15px 15px;">   
					tab4    
				</div>
			</div>
		</div>

		<h3>tab新增属性或方法</h3>
		<table class="table">
			<tr class="protitle">
				<th>属性</th>
				<th>说明</th>
				<th>默认值</th>
				<th></th>
			</tr>
			<tr>
				<td>simpleContextMenu</td>
				<td>显示简单右键菜单</td>
				<td>false</td>
				<td>当为true时，显示刷新、关闭、关闭其他等右键菜单</td>
			</tr>
		</table>
	<prettyprint/>
</body>
</html>